<template>
	<view
		:class="[props.styleType === 'text' ? 'segmented-control--text' : 'segmented-control--button', props._class]"
		:style="{ borderColor: props.styleType === 'text' ? '' : _activeColor }"
		class="segmented-control"
	>
		<view
			v-for="(item, index) in _values"
			:class="[
				props.styleType === 'text' ? '' : 'segmented-control__item--button',
				index === currentIndex && props.styleType === 'button' ? 'segmented-control__item--button--active' : '',
				index === 0 && styleType === 'button' ? 'segmented-control__item--button--first' : '',
				index === _values.length - 1 && props.styleType === 'button' ? 'segmented-control__item--button--last' : '',
			]"
			:key="index"
			:style="{
				backgroundColor: index === currentIndex && props.styleType === 'button' ? _activeColor : '',
				borderColor:
					(index === currentIndex && styleType === 'text') || styleType === 'button' ? _activeColor : 'transparent',
			}"
			class="segmented-control__item"
			@click="_onClick(index)"
		>
			<view
				:class="props.styleType === 'text' ? 'pb-12' : ''"
				:style="{
					'border-bottom': 'solid 1rpx',
					'border-bottom-color':
						props.styleType === 'text' ? (index === currentIndex ? _activeColor : 'transparent') : 'transparent',
				}"
			>
				<ac-text
					:color="
						index === currentIndex
							? props.styleType === 'text'
								? props.activeColor
								: 'white'
							: styleType === 'text'
							? 'black'
							: props.activeColor
					"
					:_style="{}"
					_class="segmented-control__text"
					:_class="props.styleType === 'text' && index === props.currentIndex ? 'segmented-control__item--text' : ''"
					:label="item"
				></ac-text>
			</view>
		</view>
	</view>
</template>

<script setup>
/**
 * SegmentedControl 分段器
 * @description 用作不同视图的显示
 * @tutorial https://ext.dcloud.net.cn/plugin?id=54
 * @property {Number} current 当前选中的tab索引值，从0计数
 * @property {String} styleType = [button|text] 分段器样式类型
 * 	@value button 按钮类型
 * 	@value text 文字类型
 * @property {String} activeColor 选中的标签背景色与边框颜色
 * @property {Array} values 选项数组
 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
 */

import { ref, computed, watch, onBeforeMount } from 'vue';
import { pub_props, computedColor } from '@/uni_modules/ac-ui/utils/minxs/props';

const emits = defineEmits(['clickItem']);

let currentIndex = ref(0);

const props = defineProps({
	...pub_props,
	current: {
		type: Number,
		default: 0,
	},
	values: {
		type: [Array, Object],
		default() {
			return [];
		},
	},
	theKey: {
		type: String,
	},
	activeColor: {
		type: String,
		default: 'blue-6',
	},
	styleType: {
		type: String,
		default: 'button',
	},
	_class: {
		type: String,
	},
	_style: {
		type: String,
	},
});

let current = ref(props.current);

watch(current, (val) => {
	if (val !== currentIndex.value) {
		currentIndex.value = val;
	}
});
onBeforeMount(() => {
	currentIndex.value = props.current;
});

const _values = computed(() => {
	if (props.values[0] instanceof String) {
		return props.values;
	}
	if (props.values[0] instanceof Object) {
		return props.values.map((item) => item[props.theKey]);
	}
});
// created() {
// 	this.currentIndex = this.current
// },

const _activeColor = computed(() => {
	return computedColor(props.activeColor, '', props.theme);
});

const _fontColor = computed(() => {
	if (current.value === currentIndex.value) {
		if (props.styleType === 'text') {
			return props.activeColor;
		} else {
			return 'white';
		}
	} else if (props.styleType === 'text') {
		return 'black';
	} else {
		return props.activeColor;
	}
	// index === currentIndex
	//       ? props.styleType === 'text'
	//         ? _activeColor
	//         : '#fff'
	//       : props.styleType === 'text'
	//         ? '#000'
	//         : _activeColor
	// current.value
});

function _onClick(index) {
	if (currentIndex.value !== index) {
		currentIndex.value = index;
		emits('clickItem', {
			currentIndex: index,
		});
	}
}
</script>

<style scoped>
.segmented-control {
	/* #ifndef APP-NVUE */
	display: flex;
	box-sizing: border-box;
	/* #endif */
	flex-direction: row;
	height: 36px;
	overflow: hidden;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.segmented-control__item {
	/* #ifndef APP-NVUE */
	display: inline-flex;
	box-sizing: border-box;
	/* #endif */
	position: relative;
	flex: 1;
	justify-content: center;
	align-items: center;
}

.segmented-control__item--button {
	border-style: solid;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-right-width: 1px;
	border-left-width: 0;
}

.segmented-control__item--button--first {
	border-left-width: 1px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.segmented-control__item--button--last {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.segmented-control__item--text {
	border-bottom-style: solid;
	border-bottom-width: 2px;
	padding: 6px 0;
}

.segmented-control__text {
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}
</style>
